<template>
    <div class="report-container">
        <h1 style="display: flex;justify-content: center;">sessionTitle</h1>
        <div class="report-row">
            <p><span>学校：schoolName</span></p>
            <p><span>校区：areaName</span></p>
        </div>
        <div class="report-row">
            <p><span>姓名：studentName</span></p>
            <p><span>学号：studentId</span></p>
            <p><span>性别：sex</span></p>
        </div>
        <div class="report-row">
            <p><span>年级：gradeName</span></p>
            <p><span>班级：className</span></p>
        </div>
        <div class="report-row">
            <p><span>测评时间：reportTime</span></p>
        </div>
        <span>评估结果：result</span>
        <table border="1">
            <thead>
                <tr>
                    <th>指标</th>
                    <th>得分</th>
                    <th>参考指标范围</th>
                </tr>
            </thead>
            <tbody>
                <td>example</td>
                <td>score</td>
                <td>scoreBetween</td>
            </tbody>
        </table>
        <div>
            kepuContext
        </div>
    </div>
</template>
  
<script>

export default {
    data() {
        return {
        };
    },
};
</script>
<style>
.report-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 确保.report-container内的.report-row居中对齐 */
    width: 100%;
    max-width: 600px;
    /* 根据需要设置一个最大宽度 */
    margin: auto;
    /* 水平居中整个.report-container */
}

.report-row {
    display: flex;
    justify-content: flex-start;
    /* 行内元素左对齐 */
    width: 100%;
    /* 让.report-row占满.report-container的宽度 */
    margin-bottom: 10px;
    /* 为每行添加一些底部外边距 */
}

.report-row p {
    margin-right: 20px;
    /* 为段落之间添加一些右侧外边距 */
}

.report-row:first-child p,
.report-row:nth-child(3) p {
    flex: 1;
    /* 第一行和第三行的段落平均分配空间 */
}

.report-row:nth-child(2) p {
    flex: 0 0 calc(33.333% - 20px);
    /* 第二行的段落各占三分之一宽度，减去间隔 */
}

.report-row:last-child {
    flex-direction: column;
    align-items: flex-start;
    /* 最后一行的段落顶部对齐 */
}

/* 设置整个页面的字体和背景 */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 20px;
}

/* 设置表格的样式 */
table {
    width: 100%;
    /* 表格宽度占满容器 */
    border-collapse: collapse;
    /* 边框合并为单一线条 */
    margin-top: 20px;
    margin-bottom: 20px;
    /* 表格上方空间 */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    /* 给表格添加阴影效果 */
    background-color: #ffffff;
    /* 表格背景色 */
}

/* 设置表头样式 */
thead th {
    background-color: #4CAF50;
    /* 表头背景色 */
    color: white;
    /* 表头文字颜色 */
    text-align: left;
    /* 文字左对齐 */
    padding: 10px;
    /* 表头内边距 */
}

/* 设置表格主体样式 */
tbody td {
    padding: 10px;
    /* 单元格内边距 */
    border-bottom: 1px solid #ddd;
    /* 单元格底部边框 */
}
</style>
  